<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    <title>温舒燃 – 交互式数据可视化项目</title>
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>
    <!-- Favicon -->
<!--    <link rel="icon" href="/images/tou.ico" type="image/x-icon">&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="{{ url_for('static',filename='all.min.css') }}">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="{{ url_for('static',filename='quick-website.css') }}" id="stylesheet">
</head>

<body>
    <!-- Preloader -->
    <div class="preloader">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <!-- Brand -->
            <a class="navbar-brand" href="#">
                <svg  t="1656135518742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6739" width="64" height="64"><path d="M512 509.44m-463.36 0a463.36 463.36 0 1 0 926.72 0 463.36 463.36 0 1 0-926.72 0Z" fill="#FFFFFF" p-id="6740"></path><path d="M512 980.48c-259.584 0-471.04-211.456-471.04-471.04s211.456-471.04 471.04-471.04 471.04 211.456 471.04 471.04-211.456 471.04-471.04 471.04z m0-926.72c-251.392 0-455.68 204.288-455.68 455.68s204.288 455.68 455.68 455.68 455.68-204.288 455.68-455.68-204.288-455.68-455.68-455.68z" fill="#2E66FF" p-id="6741"></path><path d="M512 860.672c-232.448 0-423.936-175.104-449.536-400.896-2.048 16.896-3.072 34.304-3.072 51.712 0 249.856 202.752 452.608 452.608 452.608 249.856 0 452.608-202.752 452.608-452.608 0-17.408-1.024-34.816-3.072-51.712-25.6 225.792-217.088 400.896-449.536 400.896z" fill="#C9E6FF" p-id="6742"></path><path d="M257.536 509.44m-115.712 0a115.712 115.712 0 1 0 231.424 0 115.712 115.712 0 1 0-231.424 0Z" fill="#FFF152" p-id="6743"></path><path d="M771.072 509.44m-115.712 0a115.712 115.712 0 1 0 231.424 0 115.712 115.712 0 1 0-231.424 0Z" fill="#FFF152" p-id="6744"></path><path d="M278.016 379.392a105.984 95.232 90 1 0 190.464 0 105.984 95.232 90 1 0-190.464 0Z" fill="#FFB5EC" p-id="6745"></path><path d="M373.248 493.056c-56.832 0-102.912-51.2-102.912-113.664s46.08-113.664 102.912-113.664S476.16 316.416 476.16 379.392s-46.592 113.664-102.912 113.664z m0-211.968c-48.128 0-87.552 44.032-87.552 98.304s39.424 98.304 87.552 98.304c48.128 0 87.552-44.032 87.552-98.304s-39.424-98.304-87.552-98.304z" fill="#2E66FF" p-id="6746"></path><path d="M561.664 378.88a105.984 95.232 90 1 0 190.464 0 105.984 95.232 90 1 0-190.464 0Z" fill="#FFB5EC" p-id="6747"></path><path d="M656.896 492.544c-56.832 0-102.912-51.2-102.912-113.664s46.08-113.664 102.912-113.664 102.912 51.2 102.912 113.664-46.08 113.664-102.912 113.664z m0-212.48c-48.128 0-87.552 44.032-87.552 98.304s39.424 98.304 87.552 98.304c48.128 0 87.552-44.032 87.552-98.304s-38.912-98.304-87.552-98.304zM445.952 345.6c0 34.816-25.088 62.464-56.32 62.464s-56.32-28.16-56.32-62.464c0-9.728 2.048-18.944 5.632-26.624 9.216-20.992 28.16-35.84 50.688-35.84s41.984 14.848 50.688 35.84c3.584 7.68 5.632 16.896 5.632 26.624z" fill="#2E66FF" p-id="6748"></path><path d="M729.6 345.6c0 34.816-25.088 62.464-56.32 62.464s-56.32-28.16-56.32-62.464c0-9.728 2.048-18.944 5.632-26.624 9.216-20.992 28.16-35.84 50.688-35.84s41.984 14.848 50.688 35.84c3.584 7.68 5.632 16.896 5.632 26.624zM508.416 604.672c-53.76 0-104.96-19.968-144.896-56.32l-7.68-7.168c-3.072-3.072-3.584-7.68-0.512-10.752 3.072-3.072 7.68-3.584 10.752-0.512l7.68 7.168c39.936 36.352 91.136 54.784 144.896 52.224s102.912-26.112 139.264-66.048c3.072-3.072 7.68-3.584 10.752-0.512 3.072 3.072 3.584 7.68 0.512 10.752-38.912 43.008-92.16 68.608-150.016 71.168h-10.752z" fill="#2E66FF" p-id="6749"></path><path d="M226.304 480.768m-10.752 0a10.752 10.752 0 1 0 21.504 0 10.752 10.752 0 1 0-21.504 0Z" fill="#2E66FF" p-id="6750"></path><path d="M268.288 480.768m-10.752 0a10.752 10.752 0 1 0 21.504 0 10.752 10.752 0 1 0-21.504 0Z" fill="#2E66FF" p-id="6751"></path><path d="M756.736 480.768m-10.752 0a10.752 10.752 0 1 0 21.504 0 10.752 10.752 0 1 0-21.504 0Z" fill="#2E66FF" p-id="6752"></path><path d="M798.72 480.768m-10.752 0a10.752 10.752 0 1 0 21.504 0 10.752 10.752 0 1 0-21.504 0Z" fill="#2E66FF" p-id="6753"></path></svg>
            </a>
            <!-- Toggler -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Collapse -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mt-4 mt-lg-0 ml-auto">
                    <li class="nav-item ">
                        <a class="nav-link" href="https://gitee.com/wen-shuran/dashboard/projects">个人GITEE</a>
                    </li>
                </ul>
                <!-- Button -->
                <a class="navbar-btn btn btn-sm btn-primary d-none d-lg-inline-block ml-3" href="https://gitee.com/wen-shuran/interactive-data-visualization">
                    Gitee交互式数据可视化仓库
                </a>
            </div>
        </div>
    </nav>
    <!-- Main content -->
    <section class="slice py-7">
        <div class="container">
            <div class="row row-grid align-items-center">
                <div class="col-12 col-md-5 col-lg-6 order-md-2 text-center">
                    <!-- Image -->
                    <figure class="w-100">
                        <img alt="Image placeholder" src="https://quick.bootmb.com/assets/img/svg/illustrations/illustration-3.svg" class="img-fluid mw-md-120">
                    </figure>
                </div>
                <div class="col-12 col-md-7 col-lg-6 order-md-1 pr-md-5">
                    <!-- Heading -->
                    <h1 class="display-4 text-center text-md-left mb-3">
                        交互式数据可视化项目 </br>
                        <h2>
                        <strong class="text-primary" >基于招聘网站数据分析岗位数据集</strong></h2>
                    </h1>
                    <!-- Text -->
                    <p class="lead text-center text-md-left text-muted">该项目数据来自和鲸社区2022年上传的招聘网站关于数据分析岗位的数据集，有城市、招聘岗位、工作经验、学历、所招人数、职位信息、公司类型、公司规模、所属行业等字段，项目基于以上数据进行数据读取、数据清洗和数据分析，基于处理好的数据集进行数据可视化展示。
                    </p>
                    <!-- Buttons -->
                    <div class="text-center text-md-left mt-5">
                        <a href={{url_for('biaoge')}} class="btn btn-primary btn-icon" target="_blank">
                            <span class="btn-inner--text">数据可视化展示</span>
                            <span class="btn-inner--icon"><i data-feather="chevron-right"></i></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg pt-lg-6 pb-0 pb-lg-6 bg-section-secondary">
        <div class="container">
            <!-- Title -->
            <!-- Section title -->
            <div class="row mb-5 justify-content-center text-center">
                <div class="col-lg-6">
                    <span class="badge badge-soft-success badge-pill badge-lg">
                        温&nbsp;舒&nbsp;燃
                    </span>
                    <h2 class=" mt-4">项目详细介绍</h2>
                    <div class="mt-2">
                        <p class="lead lh-180">数据来源：和鲸社区</p>
                    </div>
                </div>
            </div>
            <!-- Card -->
            <div class="row mt-5">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body pb-5">
                            <div class="pt-4 pb-5">
                                <img src="https://quick.bootmb.com/assets/img/svg/illustrations/illustration-5.svg" class="img-fluid img-center" style="height: 150px;" alt="Illustration" />
                            </div>
                            <h5 class="h4 lh-130 mb-3">数据清洗</h5>
                            <br class="text-muted mb-0">
                                1、由于专业要求一列缺失值较多，考虑删除</br>
                                2、处理数据集中的空行，填充nan值</br>
                                3、统一薪资一列的单位，使其统一，增加最高工资和最低工资列</br>
                                4、增加平均工资列
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body pb-5">
                            <div class="pt-4 pb-5">
                                <img src="https://quick.bootmb.com/assets/img/svg/illustrations/illustration-6.svg" class="img-fluid img-center" style="height: 150px;" alt="Illustration" />
                            </div>
                            <h5 class="h4 lh-130 mb-3">数据分析</h5>
                            <p class="text-muted mb-0">
                                1、计算筛选数据分析岗位的城市需求分布和数量</br>
                                2、计算筛选数据分析岗位各城市的平均薪资，计算统计各城市最高工资和最低工资的差异</br>
                                3、对公司类型、所属行业、学历做相关统计</br>
                                4、将学历、所属行业和平均薪资做相关分析
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body pb-5">
                            <div class="pt-4 pb-5">
                                <img src="https://quick.bootmb.com/assets/img/svg/illustrations/illustration-7.svg" class="img-fluid img-center" style="height: 150px;" alt="Illustration" />
                            </div>
                            <h5 class="h4 lh-130 mb-3">数据可视化</h5>
                            <br class="text-muted mb-0">
                                1、城市数量横向柱状图</br>
                                2、城市需求数量热力地图及数量分布地图</br>
                                3、岗位最高工资和最低工资的分组柱状图</br>
                                4、数据分析岗位在各城市的平均薪资纵向柱状图</br>
                                5、学历要求面积图</br>
                                6、公司类型和学历环状图</br>
                                7、所属行业词云图</br>
                                8、公司规模散点图</br>
                                9、公司规模占比漏斗图</br>
                                10、行业平均薪资棒棒糖图
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <p>广州南方学院 <a href="#">网络与新媒体专业</a>, by <a href="https://gitee.com/wen-shuran/dashboard/projects">@温舒燃</a>.</p>
        </div>

    </section>
    <section class="slice slice-lg bg-section-dark pt-5 pt-lg-8">


    <!-- Core JS  -->
    <script src="{{ url_for('static',filename='jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static',filename='svg-injector.min.js') }}"></script>
    <script src="{{ url_for('static',filename='feather.min.js') }}"></script>
    <!-- Quick JS -->
    <script src="{{ url_for('static',filename='quick-website.js') }}"></script>
</body>

</html>